import React from 'react';
import { Subject } from 'rxjs';
import { debounceTime, throttleTime, bufferTime, bufferWhen } from 'rxjs/operators';
import { PageRender as PageRenderElement } from '../pdf-render/page-render';
import { Transition } from 'react-spring/renderprops';
import { pageSealDefaultSize } from 'components/envelope/form/form'

import { Toast } from 'antd-mobile';
import style from './index.less';

import { getPDFDocument } from '../pdf-render/pdf-render-store';
import { PageRender } from '../pdf-render/render-page';
import { VerticalLayout } from '../pdf-render/vertical-layout';
import { FORM_TYPES } from '../envelope/form/form';
import styles from '../navbar/index.less';

function getPagekey(docId, page) {
	return `${docId}_${page}`;
}

class PDFViewers extends React.Component {
	constructor(props) {
		super(props);

		this.currentDocs = props.docs; //当前展示的文档列表
		this.currentScale = props.scale; //当前展示的文档列表
		this.preScale = props.scale; //当前展示文档列表的预渲染比例，最终currentScale会与preScale相等

		this.layout = new VerticalLayout(); //布局算法

		this.documentRenders = []; //PDF渲染代理列表
		this.pageRenders = []; //所有页面（从理论上的先后顺序）
		this.firstPageRenders = []; // 第一页组成的数组
		this.minSizeFirstPageRenders = 10;
		this.pageRendersMap = {}; //pageRender映射表

		this.pageSizes = []; //页面大小数组
		this.pageRects = []; //页面矩形大小数组
		this.documentSize = { width: 0, height: 0 }; //内容大小
		this.showPageInfos = []; //展示的页面信息

		this.scrollContainerRef = React.createRef();
		this.documentContainerRef = React.createRef();
		this.toucheResizing = false;

		//缩放事件
		this.resizing = false; //是否在缩放中(为了性能，缩放中不触发渲染)

		this.state = {
			pageInfoVisable: false,
			currentDocPage: 1, //当前页面的页码
			currentDocPageNumber: 1, //当前页面文档的页数
			sealInfo: '',
			EditingDocId: '',
		};

		this.init();
	}

	//初始化
	async init() {
		let docs = this.currentDocs;
		let scale = this.currentScale;

		this.documentRenders = []; //PDF渲染代理列表
		this.pageRenders = []; //所有页面（从理论上的先后顺序）
		this.pageRendersMap = {}; //pageRender映射表

		this.pageSizes = []; //页面大小数组
		this.pageRects = []; //页面矩形大小数组
		this.documentSize = { width: 0, height: 0 }; //内容大小
		this.showPageInfos = []; //展示的页面信息

		if (docs.length === 0) return;
		this.currentDocs = docs;
		let documentRenders;
		try {
			documentRenders = await Promise.all(docs.map(async (doc, index) => {
				let pdfProxy = await getPDFDocument(doc.pdfSrc);
				let firstPageProxy = await pdfProxy.getPage(1);
				let numberOfPages = pdfProxy.numPages;

				let pageRenders = [];
				for (let page = 1; page <= numberOfPages; page++) {
					const pageRender = new PageRender(doc.id, page, firstPageProxy, pdfProxy, this);
					pageRender.setScale(scale);
					pageRenders.push(pageRender);
				}
				let firstPageRenders = [];
				for (let num = 0; num < Math.min(this.minSizeFirstPageRenders, numberOfPages); num++) {
					const pageRender = new PageRender(doc.id, 1, firstPageProxy, pdfProxy, this);
					pageRender.index = index
					pageRender.setScale(scale);
					firstPageRenders.push(pageRender);
				}
				return {
					docId: doc.id,
					pdfProxy,
					pageRenders,
					firstPageRenders,
					name: doc.name,
				};
			}));
		} catch (err) {
			Toast.fail('加载PDF文件失败');
			return;
		}

		this.documentRenders = documentRenders;
		let pageRenders = [];
		let firstPageRenders = [];
		let pageRendersMap = {};
		this.documentRenders.forEach(documentRender => {
			pageRenders = pageRenders.concat(documentRender.pageRenders);
			firstPageRenders.push(documentRender.firstPageRenders);
			documentRender.pageRenders.forEach(pageRender => pageRendersMap[getPagekey(pageRender.docId, pageRender.page)] = pageRender);
		});
		this.pageRenders = pageRenders;
		this.pageRendersMap = pageRendersMap;
		this.firstPageRenders = firstPageRenders;

		this.updateSize();
		this.renderDocumentSize();
		this.updateShowPages();
		this.forceUpdate();
		this.renderPagesContent();
	}

	componentDidMount() {
		if (this.props.onBindPDFRef)
			this.props.onBindPDFRef(this);

		let scrollContainer = this.scrollContainerRef.current;
		if (scrollContainer) {
			//https://github.com/chrvadala/react-svg-pan-zoom/issues/141
			//Unable to preventDefault inside passive event listener invocation.
			scrollContainer.addEventListener('wheel', this.onWheel, {
				passive: false,
			});

			scrollContainer.addEventListener('touchstart', this.onTouchStart, {
				passive: false,
			});
		}
	}

	componentDidUpdate() {
		let scrollContainer = this.scrollContainerRef.current;
		if (scrollContainer) {
			//https://github.com/chrvadala/react-svg-pan-zoom/issues/141
			//Unable to preventDefault inside passive event listener invocation.
			scrollContainer.addEventListener('wheel', this.onWheel, {
				passive: false,
			});

			scrollContainer.addEventListener('touchstart', this.onTouchStart, {
				passive: false,
			});
		}
	}

	shouldComponentUpdate(nextProps, nextState) {
		const { scale, ..._props } = this.props;
		const { scale: nextScale, ..._nextProps } = nextProps;
		if (scale !== nextScale && JSON.stringify(_props) === JSON.stringify(_nextProps)) {
			return false;
		}
		if (JSON.stringify(nextProps.docs) !== JSON.stringify(this.currentDocs)) {
			this.currentDocs = nextProps.docs;
			this.init();
		}
		return true;
	}

	// 内部函数 START===========================================

	//更新页面大小数据
	updateSize() {
		let pageRenders = this.pageRenders;
		let pageSizes = this.layout.computePagesSize(pageRenders);
		let { pageRects, documentSize } = this.layout.computedDocAndPagesRects(pageSizes);
		this.pageSizes = pageSizes;
		this.documentSize = documentSize;
		this.pageRects = pageRects;
	}

	//预更新页面大小数据
	updateSizePre(scale) {

		let p = scale / this.currentScale;
		let pageSizes = this.pageSizes.map(pageSize => {
			return {
				width: Math.round(pageSize.width * p),
				height: Math.round(pageSize.height * p),
				page: pageSize.page,
				docId: pageSize.docId,
			};
		});
		let { pageRects, documentSize } = this.layout.computedDocAndPagesRects(pageSizes);
		this.documentSize = documentSize;
		this.pageRects = pageRects;
	}

	//更新文档大小
	renderDocumentSize() {

		let el = this.documentContainerRef.current;
		if (!el) return;
		let documentSize = this.documentSize;
		el.style.width = documentSize.width + 'px';
		el.style.height = documentSize.height + 'px';
	}

	//计算当前可见页面
	computeCurrentShowPageInfos() {
		let scrollContainer = this.scrollContainerRef.current;
		if (!scrollContainer) return [];
		const pageRects = this.pageRects;
		const scrollContainerRect = scrollContainer.getBoundingClientRect();

		const viewTop = scrollContainer.scrollTop;
		const viewLeft = scrollContainer.scrollLeft;
		const viewWidth = scrollContainerRect.width;
		const viewHeight = scrollContainerRect.height;
		const showPagesSet = new Set();
		pageRects.forEach((pageRect, i) => {
			if (pageRect.top < viewTop + viewHeight &&
				pageRect.top + pageRect.height > viewTop &&
				pageRect.left < viewLeft + viewWidth &&
				pageRect.left + pageRect.width > viewLeft) {
				if (pageRects[i - 1]) showPagesSet.add(pageRects[i - 1]);
				showPagesSet.add(pageRects[i]);
				if (pageRects[i + 1]) showPagesSet.add(pageRects[i + 1]);
			}
		});
		return [...showPagesSet];
	}

	pdfDetail = (data) => {
		let scrollContainer = this.scrollContainerRef.current;
		const pageRects = this.pageRects;
		let top = '';
		pageRects.forEach((item) => {
			if (item.docId === data.id && item.page === 1) {
				top = item.top

			}
		})
		scrollContainer.scrollTop = top;

	}
	changePdfTop = (top) => {
		let scrollContainer = this.scrollContainerRef.current;
		if (scrollContainer) {
			scrollContainer.scrollTop = top;
		}
	}

	//更新可见页面
	updateShowPages() {
		let showPageInfos = this.computeCurrentShowPageInfos();
		this.showPageInfos = showPageInfos;
	}

	//可见视图信息的更新，更新展示当前文档页数、总页数
	updateShowPageInfo() {
		let scrollContainer = this.scrollContainerRef.current;
		const { getPdfScroll } = this.props
		if (getPdfScroll) {
			getPdfScroll(scrollContainer.scrollTop)
		}
		if (!scrollContainer) return;

		const scrollContainerRect = scrollContainer.getBoundingClientRect();
		let showPageInfos = this.showPageInfos;
		let docPagesMap = {};
		this.documentRenders.forEach(documentRender => docPagesMap[documentRender.docId] = documentRender.pdfProxy.numPages);

		const viewTop = scrollContainer.scrollTop;
		const viewHeight = scrollContainerRect.height;
		const viewBottom = viewTop + viewHeight;

		let pageInfos = showPageInfos.map(showPageInfo => {
			let height = 0;
			if (showPageInfo.top < viewTop + viewHeight &&
				showPageInfo.top + showPageInfo.height > viewTop) {
				height = Math.min(viewBottom, showPageInfo.top + showPageInfo.height) - Math.max(viewTop, showPageInfo.top);
			}
			let score = height / showPageInfo.height;
			return {
				docId: showPageInfo.docId,
				page: showPageInfo.page,
				score,
				docNumPages: docPagesMap[showPageInfo.docId],
			};

		});

		pageInfos.sort((a, b) => {
			if (a.score === b.score) {
				return a.page - b.page;
			}
			return b.score - a.score;
		});
		if (pageInfos.length > 0) {
			this.setState({
				currentDocPage: pageInfos[0].page,
				currentDocPageNumber: pageInfos[0].docNumPages,
			});
		}
	}

	//渲染可见页面内容
	renderPagesContent() {
		const { type } = this.props;
		let showPageInfos = this.showPageInfos;
		let pageRendersMap = this.pageRendersMap;
		showPageInfos.forEach(showPageInfo => {
			pageRendersMap[getPagekey(showPageInfo.docId, showPageInfo.page)].render(type);
		});
	}

	//获取视图区域在文档当中的信息
	getViewRectPositionInfo(viewRect) {
		let pageRects = this.pageRects;
		if (pageRects.length === 0) return null;

		let documentContainer = this.documentContainerRef.current;
		if (!documentContainer) return null;

		let documentContainerRect = documentContainer.getBoundingClientRect();
		let rectInContainer = {
			top: viewRect.top - documentContainerRect.top,
			left: viewRect.left - documentContainerRect.left,
			width: viewRect.width,
			height: viewRect.height,
		};

		//寻找目标页
		let len = pageRects.length;
		let targetPageRect = null;
		let targetPageRectDistance = Infinity;
		//后续可以用二分进行优化(但对于只有几页的情况性能差距大不)
		for (let i = 0; i < len; i++) {
			let pageRect = pageRects[i];
			let distance = Math.abs((pageRect.top + pageRect.height / 2) - (rectInContainer.top + rectInContainer.height / 2));
			if (distance < targetPageRectDistance) {
				targetPageRectDistance = distance;
				targetPageRect = pageRect;
			}
		}
		//计算在该页面的位置
		let top = rectInContainer.top - targetPageRect.top;
		let left = rectInContainer.left - targetPageRect.left;
		let width = rectInContainer.width;
		let height = rectInContainer.height;

		let page = targetPageRect.page;
		//对top的情况分类处理
		if (top < 0) {
			if (page > 1) {
				//若当前页数不是第一页，则页数可以减1
				top = targetPageRect.height - height + top;
				page = page - 1;
			}
			else {
				top = 0;
			}
		}
		else if (top > targetPageRect.height - height) {
			if (page > this.state.currentDocPageNumber) {
				//pdf页面渲染间距为20,若超过间隙的一半并且当前不是最后一页，则移动至下一页
				// if(top > targetPageRect.height -height+20){
				//   top = top-targetPageRect.height -height+20;
				//   page=page+1;
				// }
				// else if(top >= targetPageRect.height -height+10&&top <= targetPageRect.height -height+20){
				//   top = 0;
				//   page=page+1;
				// }
				// else if(top < targetPageRect.height -height+10){
				//   top=targetPageRect.height - height;
				// }

				let middleHeight = top + 0.5 * height;//签名水平中线离顶部距离
				let downHeight = top + height;//签名底线离顶部距离
				if (middleHeight > targetPageRect.height + 10) {
					if (middleHeight > targetPageRect.height + 20 + 0.5 * height) {
						top = top - targetPageRect.height - height + 20;
						page = page + 1;
					}
					else {
						top = 0;
						page = page + 1;
					}
				}
				else {
					top = targetPageRect.height - height;
				}
			}
			else if (page === this.state.currentDocPageNumber) {//当前页是最后一页
				top = targetPageRect.height - height;
			}
		}
		//对是否超过左右边界进行处理
		if (left < 0) left = 0;
		else if (left > targetPageRect.width - width) {
			left = targetPageRect.width - width;
		}
		// if(page > this.pageSizes.length) page = this.pageSizes.length
		return {
			docId: targetPageRect.docId,
			page: page,
			rectInPage: {
				top: top,
				left: left,
				width: width,
				height: height,
			},
			pageRect: targetPageRect,
		};
	}

	//获取目标文档，目标页面的，目标框架所处的视图位置
	getTargetDocumentPageInsideRectViewRect(docId, page, rect) {
		const pageRect = this.pageRects.find(_ => _.docId === docId && _.page === page);
		if (!pageRect) return;

		let documentContainerRect = this.documentContainerRef.current.getBoundingClientRect();
		return {
			top: documentContainerRect.top + pageRect.top + rect.top,
			left: documentContainerRect.left + pageRect.left + rect.left,
			width: rect.width,
			height: rect.height,
		};
	}

	//执行设置渲染大小的操作
	doScale(scale, { top, left }) {
		let resizeStartRect = {
			top,
			left,
			width: 1,
			height: 1,
			scrollTop: this.scrollContainerRef.current.scrollTop,
			scrollLeft: this.scrollContainerRef.current.scrollLeft,
		};
		this.resizeStartRect = resizeStartRect;
		let info = this.getViewRectPositionInfo(resizeStartRect);

		info.rectInPage.top = info.rectInPage.top * scale / this.preScale;
		info.rectInPage.left = info.rectInPage.left * scale / this.preScale;
		info.rectInPage.width = info.rectInPage.width * scale / this.preScale;
		info.rectInPage.height = info.rectInPage.height * scale / this.preScale;

		this.pageRenders.forEach(pageRender => pageRender.setScale(scale));
		this.firstPagesSetScale(scale);
		// this.updateSizePre(scale) // 预先计算性能好但是会存在偏差，目前暂时改用实时计算
		this.updateSize();
		this.renderDocumentSize();
		this.forceUpdate();

		this.preScale = scale;

		// 跳转到之前选中的中心点
		let viewRect = this.getTargetDocumentPageInsideRectViewRect(info.docId, info.page, info.rectInPage);
		let scrollContainer = this.scrollContainerRef.current;
		scrollContainer.scrollLeft = scrollContainer.scrollLeft + viewRect.left - left;
		scrollContainer.scrollTop = scrollContainer.scrollTop + viewRect.top - top;

		this.updateShowPages();
		this.forceUpdate();
	}

	// 内部函数 END=============================================


	// 外部可操作函数 START===========================================

	setEditingDocId = (docId) => {
		this.setState({
			docId
		})
	}

	firstPagesSetScale = (scale) => {
		this.firstPageRenders.forEach(pagesRenders => pagesRenders.forEach(page => page.setScale(scale)));
	}

	firstPagesRender = () => {
		this.firstPageRenders.forEach(pagesRenders => pagesRenders.forEach(page => page.render()));
	};

	//设置内部渲染大小
	setScale = (() => {

		let onResizeSubject = new Subject();

		onResizeSubject.pipe(throttleTime(1000 / 20)).subscribe(({ scale, viewPoint }) => {
			this.resizing = true;
			this.doScale(scale, viewPoint);
		});
		onResizeSubject.pipe(debounceTime(1000 / 60)).subscribe(() => this.resizing = true);
		onResizeSubject.pipe(debounceTime(1000 / 3)).subscribe(({ scale }) => {
			this.resizing = false;
			this.currentScale = scale;
			this.updateSize();
			this.renderDocumentSize();
			this.updateShowPages();
			this.forceUpdate();
			this.renderPagesContent();

			this.firstPagesSetScale(scale);
			this.firstPagesRender();
		});

		return (scale, viewPoint) => {
			onResizeSubject.next({ scale, viewPoint });
		};
	})();

	getSealInfo = (info) => {
		this.setState({
			sealInfo: info,
		});
	};

	savePagingSeal = () => {
		this.setState({
			editSeal: false
		});
	};

	scrollToFormPage = (docId, isEditSeal) => {
		const currentDocPage = this.firstPageRenders.filter(item => item[0].docId === docId)[0][0].index
		const currentDocRect = this.pageRects.filter(item => item.docId === docId && item.page === 1)[0]
		let top
		if (isEditSeal) {
			top = currentDocRect.top
		} else {
			top = currentDocPage * (currentDocRect.height)
		}
		this.scrollContainerRef.current.scrollTop = top
	}

	// 外部可操作函数 END===========================================

	//事件响应 START=======================================

	// 页面渲染代理加载成功(可以用于更新页面大小)
	onPageProxyLoadSuccess = (() => {
		let sub = new Subject();
		//积攒在一起最后进行计算
		sub.pipe(bufferWhen(() => sub.pipe(debounceTime(1000 / 20)))).subscribe(pageRenders => {
			let update = false;
			pageRenders.forEach(pageRender => {
				const pageRect = this.pageRects.find(_ => _.docId === pageRender.docId && _.page === pageRender.page);
				if (!pageRect) return;

				const size = pageRender.getPageShowSize();
				if (size.width === pageRect.width && size.height === pageRect.height) return;

				update = true;
			});

			if (update) {
				this.updateSize();
				this.renderDocumentSize();
				this.updateShowPages();
				this.forceUpdate();
				this.renderPagesContent();
			}
		});

		return pageRender => {
			sub.next(pageRender);
		};
	})();

	// 页面渲染成功
	onPageRenderedSuccess() {
		this.forceUpdate();
	}

	// 页面渲染失败
	onPageRenderError() {
		this.forceUpdate();
	}

	//滚轮滚动缩放事件
	onWheel = e => {
		if (e.ctrlKey) {
			if (e.deltaY < 0) {
				this.props.onScaleChange && this.props.onZoomIn({
					top: e.clientY,
					left: e.clientX,
				});
			} else {
				this.props.onScaleChange && this.props.onZoomOut({
					top: e.clientY,
					left: e.clientX,
				});
			}
			e.preventDefault();
		}
	};

	//滚动事件
	onScroll = (() => {
		let onScrollSubject = new Subject();
		onScrollSubject.pipe(throttleTime(1000 / 60)).subscribe(_ => {
			if (!this.state.pageInfoVisable) {
				this.setState({
					pageInfoVisable: true,
				});
			}

			this.updateShowPages();
			this.updateShowPageInfo();
			this.forceUpdate();
		});
		onScrollSubject.pipe(debounceTime(1000 / 20)).subscribe(_ => {
			this.renderPagesContent();
		});
		onScrollSubject.pipe(debounceTime(1000)).subscribe(_ => {
			if (this.state.pageInfoVisable) {
				this.setState({
					pageInfoVisable: false,
				});
			}
		});
		return e => {
			if (this.resizing) return; //缩放时，更新操作交给缩放函数(会产生，缩放后立即滚动，没有界面显示的问题)
			onScrollSubject.next(e);
		};
	})();

	//触屏事件(双指放大缩小)
	onTouchStart = e => {
		e.stopPropagation();
		let touches = e.touches;
		if (touches.length < 2) return;
		let scrollContainer = this.scrollContainerRef.current;
		if (!scrollContainer) return;

		if (this.toucheResizing) return;
		this.toucheResizing = true;

		let touchi = touches[0];
		let touchj = touches[1];
		let startDistance = Math.sqrt(Math.pow(touchi.clientX - touchj.clientX, 2) + Math.pow(touchi.clientY - touchj.clientY, 2));
		let startScale = this.props.scale;

		const onTouchMove = e => {
			let touches = e.touches;
			if (touches.length !== 2) return;
			let touchi = touches[0];
			let touchj = touches[1];
			let distance = Math.sqrt(Math.pow(touchi.clientX - touchj.clientX, 2) + Math.pow(touchi.clientY - touchj.clientY, 2));
			if (Math.abs(distance - startDistance) > 5) {
				this.props.onScaleChange && this.props.onScaleChange(distance / startDistance * startScale, {
					top: (touchi.clientY + touchj.clientY) / 2,
					left: (touchi.clientX + touchj.clientX) / 2,
				});
			}
		};

		const onTouchEnd = e => {
			let touches = e.touches;
			if (touches.length > 1) return;

			this.toucheResizing = false;
			window.removeEventListener('touchmove', onTouchMove);
			window.removeEventListener('touchend', onTouchEnd);
		};

		window.addEventListener('touchmove', onTouchMove);
		window.addEventListener('touchend', onTouchEnd);
	};

	//事件响应 END=======================================

	//事件触发 START=====================================


	//事件触发 END=======================================

	// 内部组件 START====================================
	showPDFNameWhileEditPagingSeal() {
		const { docId } = this.state;
		const currentPDF = this.documentRenders.find(pdf => pdf.docId === docId);
		return (
			<div className={style.pdfMsg} style={{ width: this.documentSize.width + 'px' }}>
				<div className={style.pdfMsgTitle}>{currentPDF.name}</div>
				<div className={style.pdfMsgTotalPage}>共{currentPDF.pdfProxy.numPages}页</div>
			</div>
		);
	}

	// 内部组件 END======================================
	componentWillUnmount() {
		// TODO: componentWillUnmount
	}

	render() {
		const { editSeal, scale, type, } = this.props;
		const { sealInfo } = this.state;
		let documentSize = this.documentSize;
		let pageRendersMap = this.pageRendersMap;
		let showPageInfos = this.showPageInfos;
		let firstPageInfo = {};
		let containerStyle;
		if (editSeal) {
			firstPageInfo = showPageInfos[0];
		} else {
			containerStyle = { width: documentSize.width + 'px', height: documentSize.height + 'px' };
		}
		let drawer = {};
		let drawerStyle = {};
		if (type) {
			if (showPageInfos.length !== 0) {
				drawer = showPageInfos[0];
				drawerStyle = {
					top: drawer + 'px',
					left: drawer + 'px',
					width: drawer + 'px',
					height: drawer + 'px',
				};
			}
		}
		return (
			<div className={style.pdfViewerContainer} style={{ height: type ? '100%' : '' }}>
				{
					Object.keys(drawer).length !== 0 ? <div ref={this.scrollContainerRef} style={{ height: '100%' }}>
						<div className={style.pageDrawerContainer}
							key={getPagekey(drawer.docId, drawer.page)} style={drawerStyle}>
							<PageRenderElement
								pageRender={pageRendersMap[getPagekey(drawer.docId, drawer.page)]} type={true} />
							<div className={style.pageContent}>
								{this.props.pageRender &&
									<this.props.pageRender docId={drawer.docId} page={drawer.page} />}
							</div>
						</div>
					</div> : <div>
							<div className={style.scrollViewerContainer} ref={this.scrollContainerRef} onScroll={this.onScroll}>
								{editSeal ? this.showPDFNameWhileEditPagingSeal() : ''}
								<div className={style.documentContainer} ref={this.documentContainerRef} style={containerStyle}>
									{
										editSeal ?
											this.firstPageRenders.map((pages, pagesIndex) => {
												const { docId } = this.state;
												if (pages[0].docId !== docId) {
													return
												}
												return pages.map((firstPage, index) => {
													const pageContainerStyle = {
														top: 20 + 'px',
														right: (pages.length - index - 1) * (pageSealDefaultSize.width * scale / pages.length) + 'px',
														height: firstPageInfo.height + 'px',
														zIndex: pages.length - index,
														borderRight: '1px dashed #108ee9',
														marginBottom: 20 + 'px'
													};
													return (
														<div className={style.pageContainer}
															key={getPagekey(firstPage.docId, index)} style={pageContainerStyle}>
															<PageRenderElement
																pageRender={firstPage} />
															{
																index === 0 ?
																	<div className={style.pageContent}>
																		{this.props.pageRender &&
																			<this.props.pageRender docHeight={firstPageInfo.height}
																				docId={pages[0].docId} page={1} editSeal={editSeal} />}
																	</div> : ''
															}
														</div>
													);
												})
											}) :
											showPageInfos.map((showPageInfo, index) => {
												const pageContainerStyle = {
													top: showPageInfo.top + 'px',
													left: showPageInfo.left + 'px',
													width: showPageInfo.width + 'px',
													height: showPageInfo.height + 'px',
												};
												return (
													<div className={style.pageContainer}
														key={getPagekey(showPageInfo.docId, showPageInfo.page)} style={pageContainerStyle}>
														<PageRenderElement
															pageRender={pageRendersMap[getPagekey(showPageInfo.docId, showPageInfo.page)]} />
														<div className={style.pageContent}>
															{this.props.pageRender &&
																<this.props.pageRender docId={showPageInfo.docId} page={showPageInfo.page} docHeight={showPageInfo.height} />}
														</div>
													</div>
												);
											})
									}
								</div>
							</div>
							<Transition
								items={this.state.pageInfoVisable}
								from={{ opacity: 0 }}
								enter={{ opacity: 1 }}
								leave={{ opacity: 0 }}>
								{show => show && (props => <div className={style.bottomPageInfo}
									style={props}>{this.state.currentDocPage}/{this.state.currentDocPageNumber}</div>)}
							</Transition>
						</div>
				}
			</div>
		);
	}
}

export default PDFViewers;
